<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <title>销售计划列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" th:href="@{/css/font.css}">
  <link rel="stylesheet" th:href="@{/css/xadmin.css}">
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
  <script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">员工</a>
        <a>
          <cite>列表</cite></a>
      </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
  <div class="layui-row">
    <form class="layui-form layui-col-md12 x-so">
      <input class="layui-input" placeholder="创建开始日" name="startTime" id="start">
      <input class="layui-input" placeholder="创建截止日" name="endTime" id="end">
      <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
    </form>
  </div>
  <xblock>
    <button class="layui-btn layui-btn-danger delte-all" data-type="deleteAll"><i class="layui-icon"></i>批量删除</button>
    <button class="layui-btn" onclick="x_admin_show('添加销售计划','/sale/add/page')"><i class="layui-icon"></i>添加</button>

  </xblock>

  <table class="layui-table" id="data-table" lay-filter="data-table"></table>

</div>
<script>
  var tableIns;
  layui.use(['laydate','table','form'], function(){
    var laydate = layui.laydate;
    var table = layui.table;
    var form = layui.form;

    //监听搜索
    form.on('submit(search)', function(data){
      var param = data.field;
      // 处理开始时间和结束时间
      if (param.startTime.length !== 0){
        param.startTime = param.startTime+" 00:00:00";
      }
      if (param.endTime.length !== 0){
        param.endTime = param.endTime+" 23:59:59";
      }

      // 不影响原来的查询接口 =》 表格重载
      tableIns.reload({
        where: param
      })

      return false;
    });

    //执行一个laydate实例
    laydate.render({
      elem: '#start' //指定元素
    });

    //执行一个laydate实例
    laydate.render({
      elem: '#end' //指定元素
    });

    //第一个实例
    tableIns = table.render({
      elem: '#data-table'
      ,height: 500
      ,url: '/sale/list/data' //数据接口
      ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,method: "post"
      ,page: true //开启分页
      ,cols: [
        [ //表头
          {type:'checkbox', fixed: 'left'}
          ,{field: 'planId', title: 'ID', sort: true}
          ,{field: 'planCode', title: '计划编码'}
          ,{field: 'plannerName', title: '姓名'}
          ,{field: 'planMonth', title: '月份'}
          ,{field: 'planStatus', title: '计划状态', align: 'center' , templet: function (d) {
            var text =  d.planStatus == 1 ? "已提交" : d.planStatus == 2 ? "已通过" : "已创建";
            var clazz =  d.planStatus == 1 ? "" : d.planStatus == 2 ? " layui-btn-normal" : " layui-btn-warm";
            return '<span class="layui-btn layui-btn-sm '+clazz+'">'+text+'</span>';
          }}
          ,{field: 'createTime', title: '创建时间'}
          ,{field: 'operator', title: '操作人'}
          ,{field: 'updateTime', title: '最后操作时间', sort: true}
          ,{fixed: 'right', width:300, align:'center', toolbar: '#myToolBar'}
        ]
      ]
    });


    //工具条事件
    table.on('tool(data-table)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
      var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

      if(layEvent === 'del'){ //删除
        layer.confirm('确认删除吗？', function(index){

          $.ajax({
            type: "post",// http请求方法
            url:"/sale/delete",// 后端的接口
            data: {planId: data.planId},// 传递到后端的数据
            dataType: "json", // 后端返回的数据类型
            success: function (res) {// 服务器成功响应之后对应的逻辑
              layer.msg(res.msg);
              // 重载表格
              tableIns.reload();
              layer.close(index);
            }
          });

        });
      } else if(layEvent === 'edit'){ //编辑
        x_admin_show('编辑销售计划','/sale/edit/page?id='+data.planId);
        console.log(data.planId +"计划Id");
      }
    });

    // 批量删除
    var $ = layui.$, active = {
      deleteAll: function(){ //获取选中数据
        var checkStatus = table.checkStatus('data-table')
                ,data = checkStatus.data;
        // 判断是否勾选了数据
        if (data.length === 0){
          layer.msg("至少选择一条数据！");
          return;
        }
        // 获取选中的id数组
        var ids = [];
        $(data).each(function () {
          ids.push(this.planId);
        });

        layer.confirm('确认删除数据吗？', function(index){

          $.ajax({
            type: "post",// http请求方法
            url:"/sale/deleteAll",// 后端的接口
            data: {ids: ids},// 传递到后端的数据
            dataType: "json", // 后端返回的数据类型
            success: function (res) {// 服务器成功响应之后对应的逻辑
              layer.msg(res.msg);
              // 重载表格
              tableIns.reload();
              layer.close(index);
            }
          });

        });
      }
    };

    $('.delte-all').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

  });
  /*修改状态*/


</script>


<script type="text/html" id="myToolBar">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

</body>

</html>